<template>
  <a-menu :menu="menus" mode="horizontal" :style="{width: getWidth()}" v-model:selectedKeys="activeHeadMenu" class="header-menu" :ellipsis="false" @select="handelSelect">
    <template #overflowedIndicator>
      <span class="more-menu">
        {{ $t('other.moreFun') }}
        <down-outlined class="down-arrow" />
      </span>
    </template>
    <a-menu-item v-for="item in menus" :key="item.path">
      <template #icon>
        <span class="vertical-item">
          <span :class="['iconfont', 'ft-size18', item.icon]" v-if="item.icon"></span>
          <desktop-outlined v-else />
        </span>
      </template>
      <span class="ft-size16">{{$t(`menu.${item.permission}`)}}</span>
    </a-menu-item>
  </a-menu>
</template>

<script>
import { mapState } from 'vuex'
import { firstLevelMenuItem } from '@/utils'
import { store } from '@/store'
import { DesktopOutlined, DownOutlined } from '@ant-design/icons-vue'
export default {
  components: {
    DesktopOutlined,
    DownOutlined
  },
  data () {
    return {
      name: 'baseMenu',
      fristMenu: [],
      activeHeadMenu: '',
      isEnvOnline: process.env.VUE_APP_CONFIG == 'online'
    }
  },
  computed: {
    ...mapState({
      isCollapse: state => state.setting.isCollapse,
      activeFirstMenu: (state) => state.setting.activeFirstMenu,
      menus () {
        return localStorage.getItem('menu')
          ? JSON.parse(localStorage.getItem('menu'))
          : []
      },
    }),
  },
  watch: {
    activeFirstMenu: {
      handler (value) {
        this.activeHeadMenu = value
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    handelSelect ({ key }) {
      let firstMenu = firstLevelMenuItem(this.menus, key)
      store.commit('updateState', {
        activeFirstMenu: [firstMenu.path],
        activeFirstMenuName: `menu.${firstMenu.permission}`,
        subMenu: firstMenu.children
      })
    },
    getWidth () {
      let autoWidth = '' 
      if (this.isEnvOnline) {
        autoWidth = this.isCollapse ? 'calc(100vw - 730px)' : 'calc(100vw - 855px)'
      } else {
        autoWidth = this.isCollapse ? 'calc(100vw - 770px)' : 'calc(100vw - 925px)'
      }
      return autoWidth
    }
  },
}
</script>